import { createOrder, getProdctMoney } from '@/apis/order/order'
import { storage } from '@/store/sessionStorage'
import { editPageTitle, uploadImage } from '@/utils'
import useJudgeLogin from '@/utils/judgeLogin'
import useWeixinSdk from '@/utils/WXSdk'
import { reactive, Ref, ref } from 'vue'
import yuEIcon from '@/assets/images/icon_ye@3x.png'
import wxIcon from '@/assets/images/icon_wx@3x.png'
import { CxlMessage } from '@/components/message'
import { QUERY_REPORT_TYPE } from '@/utils/config'
import { checkQuery, getCarTypeList, updateVin } from '@/apis/report'
import { useRoute } from 'vue-router'
import { getWalletInfo } from '@/apis/home'
import { BasicData } from '@/utils/basicData'
import { userStore } from '@/store/user.store'
import ImageDirection from '@/utils/changeImageDirection'
import zonghe_img from '@/assets/images/query-1.png'
import weibao_img from '@/assets/images/query-2.png'
import xinnengyuan_img from '@/assets/images/query-3.png'
import { generateToken } from '@/apis/login'

interface CarConfig {
    modelDetail: string
    vinParseId: string
    licensePlateColor: string
}

export class Detection extends BasicData {
    //顶部海报图
    poster = ref()
    //防止重复点击创建订单
    isCreate = false
    //上传的图片地址
    uploadImageUrl = ref('')
    //是否勾选协议
    checked = ref(false)
    //是否勾选了授权
    auth = ref(false)
    //支付方式列表
    payList = reactive([
        { icon: yuEIcon, text: '余额', type: 'yue', checked: false, disable: false },
        { icon: wxIcon, text: '微信', type: 'wx', checked: false, disable: false }
    ])
    //选择支付类型下标
    selectPayIndex = ref(-1)
    //上传行驶证完成
    uploadCompleteVisible = ref(false)
    //等待查询结果
    waiting = ref(false)
    //行驶证不支持查询
    nonsupportQuery = ref(false)
    //用户信息
    result = ref('')
    //用户钱包信息
    walletInfo: any = reactive({
        productRemainFreeCountMap: new Map(), //充值赠送次数
        productSystemRemainFreeCountMap: new Map(), //系统免费试用次数
        productRemainNumberPackageCountMap: new Map(), //充值套餐
        remainAmount: '0.00',
        total: 0, //可使用次数
        remainFreeCount: 0,
        status: 1, //操作状态《1.正常;2.退款中;3.已退款)
        remainConvertCount: 0 //出险车况充值折算次数
    })
    //报告类型 1 //出险 2 //维修版 3 //新能源 4 //综合
    reportType = ref(1)
    //基本价格
    basicPrice: Ref<string | number> = ref('0.00')
    //查询报告活动单价
    price: Ref<string | number> = ref('0.00')
    //产品价格id
    priceId = ref('')
    //vin
    vin = ref('')
    resultVin = ref('')
    //车牌号
    plateNo = ref('')
    //vin 是否可编辑
    vinDisabled = ref(true)
    //上传行驶证显示loading
    loadingVisible = ref(false)
    //查询得到从车辆型号列表
    carTypeList: CarConfig[] = reactive([])
    //选择的车型
    selectCarTypeIndex = ref(-1)
    //品牌
    carBrand = ref('')
    //类型
    carModel = ref('')
    //型号id
    vinParseId = ref('')
    //行驶证key
    driveLicense = ref('')
    //车牌颜色
    licensePlateColor = ref('')
    //详细配置
    carModelDetailed = ref('')
    //是否在上传
    isStartUpload = ref(false)
    //微信用户信息
    wxUserInfo: any = ref({})
    //显示首页按钮
    homeBtnVisible = ref(false)
    //当前行驶证是否支持查询
    isSupportQuery = ref(false)
    //报告id
    reportId = ref('')
    //识别行驶证完成
    detectionFinish = ref(false)
    //默认是管理员
    isAdmin = ref(true)
    //维保车况是否支持查询（只支持上海牌查询）
    supperQuery = ref(true)
    //支付栏显示与隐藏
    payVisible = ref(false)
    //确认弹窗展示的图片
    comfirmUploadImageUrl = ref('')
    constructor() {
        super()
        this.isAdmin.value = userStore().isAdmin
        // this.init()
    }
    //初始化
    init = () => {
        const route = useRoute()
        const type: string = route.query.type as string
        this.reportType.value = type === QUERY_REPORT_TYPE[1] ? 1 : type === QUERY_REPORT_TYPE[2] ? 2 : 3

        if (this.uStore.loginStatus) {
            getProdctMoney().then(res => {
                if (res.data.value === 200) {
                    res.data.data.forEach((item: any) => {
                        if (item.productType === this.reportType.value) {
                            this.price.value = item.singlePrice
                            this.basicPrice.value = item.basicPrice
                            this.priceId.value = item.id
                        }
                    })

                    console.log(
                        'price',
                        this.price.value,
                        'reportType',
                        this.reportType.value,
                        'priceId:',
                        this.priceId.value
                    )
                    //获取用户钱包
                    getWalletInfo(this.isAdmin.value ? undefined : this.priceId.value).then(wallet => {
                        if (wallet.data.value === 200) {
                            /**
                             * 删除 {和 }字符串开头和结尾的字符。不要使用 replace以防其中有任何事件。
                             * 将结果拆分为形成键值对的每个离散 block 。
                             * 将它们拆分为实际的键和值
                             * 结果可以很容易地转换为 Map，因为构造函数 takes an array where each item is an array with two items并将其转换为第一项为键，第二项为值的映射:
                             */
                            //充值赠送次数
                            const productRemainFreeCountKeyValuePairs = wallet.data.data.productRemainFreeCount
                                .slice(1, -1)
                                .split(/\s*,\s*/)
                                .map((chunk: any) => chunk.split(':'))
                            this.walletInfo.productRemainFreeCountMap = new Map(productRemainFreeCountKeyValuePairs)

                            //系统免费试用次数
                            const productSystemRemainFreeCountMapKeyValuePairs =
                                wallet.data.data.productSystemRemainFreeCountMap
                                    .slice(1, -1)
                                    .split(/\s*,\s*/)
                                    .map((chunk: any) => chunk.split(':'))
                            this.walletInfo.productSystemRemainFreeCountMap = new Map(
                                productSystemRemainFreeCountMapKeyValuePairs
                            )

                            //套餐次数包
                            const productRemainNumberPackageCountMapKeyValuePairs =
                                wallet.data.data.productRemainNumberPackageCountMap
                                    .slice(1, -1)
                                    .split(/\s*,\s*/)
                                    .map((chunk: any) => chunk.split(':'))
                            this.walletInfo.productRemainNumberPackageCountMap = new Map(
                                productRemainNumberPackageCountMapKeyValuePairs
                            )

                            this.walletInfo.remainAmount = wallet.data.data.remainAmount
                            this.walletInfo.status = wallet.data.data.optStatus

                            this.walletInfo.remainConvertCount = wallet.data.data.remainConvertCount

                            //重置
                            this.payList[0].checked = false
                            this.payList[0].disable = false
                            this.payList[1].checked = false
                            this.payList[1].disable = false

                            this.walletInfo.total =
                                (Number(
                                    this.walletInfo.productRemainFreeCountMap.get(this.reportType.value.toString())
                                ) || 0) +
                                (Number(
                                    this.walletInfo.productSystemRemainFreeCountMap.get(
                                        this.reportType.value.toString()
                                    )
                                ) || 0) +
                                (Number(
                                    this.walletInfo.productRemainNumberPackageCountMap.get(
                                        this.reportType.value.toString()
                                    )
                                ) || 0)

                            //根据充值规则，充值的只适合出险车况查询
                            if (this.reportType.value === 1) {
                                //出险报告需要加上折算次数
                                this.walletInfo.total += Number(this.walletInfo.remainConvertCount) || 0

                                //设置默认选择支付方式 余额 > 产品价格 || 免费次数 > 0 || 系统赠送次数 >0
                                if (
                                    Number(this.walletInfo.remainAmount) >= Number(this.price.value) ||
                                    Number(this.walletInfo.total) > 0
                                ) {
                                    this.payList[0].checked = true
                                    this.payList[1].checked = false
                                    this.selectPayIndex.value = 0
                                } else {
                                    this.payList[0].disable = true
                                    this.payList[0].checked = false
                                    this.payList[1].checked = true
                                    this.selectPayIndex.value = 1
                                }

                                //判断当前是否是退款中 //操作状态《1.正常;2.退款中;3.已退款)
                                if (this.walletInfo.status === 2) {
                                    this.payList[0].disable = true
                                    this.payList[0].checked = false
                                    this.payList[1].checked = true
                                    this.selectPayIndex.value = 1
                                }
                            } else {
                                //设置默认选择支付方式系统赠送次数 >0
                                if (this.walletInfo.total > 0) {
                                    this.payList[0].checked = true
                                    this.payList[1].checked = false
                                    this.selectPayIndex.value = 0
                                } else {
                                    this.payList[0].disable = true
                                    this.payList[0].checked = false
                                    this.payList[1].checked = true
                                    this.selectPayIndex.value = 1
                                }

                                //判断当前是否是退款中 //操作状态《1.正常;2.退款中;3.已退款)
                                if (this.walletInfo.status === 2) {
                                    this.payList[0].disable = true
                                    this.payList[0].checked = false
                                    this.payList[1].checked = true
                                    this.selectPayIndex.value = 1
                                }
                            }

                            console.log('walletInfo', this.walletInfo)
                        }
                    })
                }
            })
        }
        this.payVisible.value = true
        console.log(this.payList)
        this.wxUserInfo = storage.get('wxUserInfo') ? JSON.parse(storage.get('wxUserInfo')) : null

        //设置顶部的banner
        this.poster.value =
            this.reportType.value === 1 ? zonghe_img : this.reportType.value === 2 ? weibao_img : xinnengyuan_img
        //设置标题
        editPageTitle(
            this.reportType.value === 1 ? '出险车况' : this.reportType.value === 2 ? '维保车况' : '新能源车况'
        )
    }
    //重置
    reset = () => {
        this.isCreate = false
        this.auth.value = false
        this.checked.value = false
        this.uploadImageUrl.value = ''
        this.uploadCompleteVisible.value = false
        this.waiting.value = false
        this.nonsupportQuery.value = false
        this.result.value = ''
        this.walletInfo.remainAmount = '0.00'
        this.priceId.value = ''
        this.vin.value = ''
        this.plateNo.value = ''
        this.vinDisabled.value = true
        this.loadingVisible.value = false
        this.carTypeList.length = 0
        this.selectCarTypeIndex.value = -1
        this.carBrand.value = ''
        this.reportId.value = ''
        this.carModel.value = ''
        this.vinParseId.value = ''
        this.driveLicense.value = ''
        this.licensePlateColor.value = ''
        this.isStartUpload.value = false
        this.homeBtnVisible.value = false
        this.isSupportQuery.value = false
        this.detectionFinish.value = false
        this.resultVin.value = ''
        this.comfirmUploadImageUrl.value = ''
        console.log(this.payList)
        console.log('data reset')
    }

    createrTimer: any
    //创建订单
    onCreateOrder = () => {
        //先判断用户是否登录
        useJudgeLogin.init(() => {
            if (!this.uploadImageUrl.value) {
                CxlMessage.error({ content: '请上传行驶证！', height: 0.6 })
                return false
            }
            if (this.selectPayIndex.value === -1) {
                CxlMessage.error({ content: '请选择支付方式！', height: 0.6 })
                return false
            }
            if (this.checked.value === false) {
                CxlMessage.error({ content: '请勾选并仔细阅读协议！', height: 0.6 })
                return false
            }
            if (this.auth.value === false) {
                CxlMessage.error({ content: '请勾选同意授权！', height: 0.6 })
                return false
            }
            if (this.priceId.value === '') {
                CxlMessage.error({ content: '系统异常，请联系客服！', height: 0.6 })
                return false
            }
            if (!this.isCreate) {
                //设置不可创建订单
                this.isCreate = true
                //是否是微信支付
                let isWX = false
                //维保版判断是否支持查询
                if (!this.isSupportQuery.value && this.reportType.value === 2) {
                    this.isCreate = false
                    CxlMessage.error('当前行驶证不支持查询，请更换！')
                    this.isCreate = false
                    return false
                }
                //支付类型(1.微信<2.储值扣费<5套餐次数包<3.储值赠送<4.系统赠送) 优先级
                let num = 4
                const i = this.reportType.value.toString()
                if (this.selectPayIndex.value === 0) {
                    //余额
                    isWX = false

                    if (this.reportType.value === 1) {
                        /**
                     *  productRemainFreeCountMap: new Map(), //充值赠送次数 1 出险 2 维保 3 新能源车况
                        productSystemRemainFreeCountMap: new Map(), //系统免费试用次数 1 出险 2 维保 3 新能源车况
                        productRemainNumberPackageCountMap: new Map(), //套餐次数包 1 出险 2 维保 3 新能源车况
                     */

                        if (Number(this.walletInfo.productSystemRemainFreeCountMap.get(i)) || 0 > 0) {
                            //系统赠送次数>0
                            num = 4
                        } else if (
                            (Number(this.walletInfo.productSystemRemainFreeCountMap.get(i)) || 0) === 0 &&
                            (Number(this.walletInfo.productRemainFreeCountMap.get(i)) || 0) > 0
                        ) {
                            //系统赠送次数 === 0 && 充值赠送次数>0
                            num = 3
                        } else if (
                            (Number(this.walletInfo.productSystemRemainFreeCountMap.get(i)) || 0) === 0 &&
                            (Number(this.walletInfo.productRemainFreeCountMap.get(i)) || 0) === 0 &&
                            (Number(this.walletInfo.productRemainNumberPackageCountMap.get(i)) || 0) > 0
                        ) {
                            //系统赠送次数 === 0 && 充值赠送次数===0 && 次数包>0
                            num = 5
                        } else if (
                            (Number(this.walletInfo.productSystemRemainFreeCountMap.get(i)) || 0) === 0 &&
                            (Number(this.walletInfo.productRemainFreeCountMap.get(i)) || 0) === 0 &&
                            (Number(this.walletInfo.productRemainNumberPackageCountMap.get(i)) || 0) === 0 &&
                            Number(this.walletInfo.remainAmount) >= Number(this.price.value)
                        ) {
                            //系统赠送次数 === 0 && 充值赠送次数===0  && 次数包===0 && 储值>=产品价格
                            num = 2
                        }
                    } else {
                        if (Number(this.walletInfo.productSystemRemainFreeCountMap.get(i)) || 0 > 0) {
                            //系统赠送次数>0
                            num = 4
                        } else if (
                            (Number(this.walletInfo.productSystemRemainFreeCountMap.get(i)) || 0) === 0 &&
                            (Number(this.walletInfo.productRemainFreeCountMap.get(i)) || 0) > 0
                        ) {
                            //系统赠送次数 === 0 && 充值赠送次数>0
                            num = 3
                        } else if (
                            (Number(this.walletInfo.productSystemRemainFreeCountMap.get(i)) || 0) === 0 &&
                            (Number(this.walletInfo.productRemainFreeCountMap.get(i)) || 0) === 0 &&
                            (Number(this.walletInfo.productRemainNumberPackageCountMap.get(i)) || 0) > 0
                        ) {
                            //系统赠送次数 === 0 && 充值赠送次数 === 0 && 次数包 > 0
                            num = 5
                        }
                    }
                } else {
                    //微信支付
                    num = 1
                    isWX = true
                }
                console.log('支付方式', num, i, this.walletInfo.productSystemRemainFreeCountMap.get(i))

                generateToken().then(e => {
                    console.log(e.data)
                    if (e.data.value === 200) {
                        console.log(e.data.data, e.data.value)
                        storage.set('systemToken', e.data.data)
                        //开始创建订单
                        createOrder(
                            {
                                driveLicense: this.driveLicense.value,
                                openId: this.wxUserInfo.openid,
                                payType: num,
                                vin: this.vin.value,
                                productType: this.reportType.value,
                                productId: this.priceId.value,
                                plateNo: this.plateNo.value,
                                vinParseId: this.vinParseId.value,
                                reportId: this.reportId.value
                            },
                            isWX
                        ).then((res: any) => {
                            //设置可以创建订单
                            if (res.data.value === 200) {
                                if (isWX) {
                                    this.result.value = res.data.data.wxOrderResult
                                    const wxOrderResult = res.data.data.wxOrderResult
                                    //唤起支付
                                    useWeixinSdk
                                        .onChooseWXpay({
                                            timestamp: wxOrderResult.timeStamp,
                                            nonceStr: wxOrderResult.nonceStr,
                                            package: wxOrderResult.packageValue,
                                            signType: wxOrderResult.signType,
                                            paySign: wxOrderResult.paySign
                                        })
                                        .then(
                                            () => {
                                                //支付成功 3s之后跳转
                                                this.router.replace({
                                                    path: '/vehicle-condition/query',
                                                    query: {
                                                        orderId: res.data.data.orderId,
                                                        orderNo: res.data.data.orderNo,
                                                        vin: this.vin.value,
                                                        licensePlateColor: this.licensePlateColor.value,
                                                        reportType: this.reportType.value,
                                                        vinParseId: this.vinParseId.value,
                                                        reportId: this.reportId.value
                                                    }
                                                })
                                            },
                                            () => {
                                                //取消支付 | 支付失败
                                                this.router.replace('/vehicle-condition/query-record')
                                            }
                                        )
                                } else {
                                    //查询成功
                                    this.router.replace({
                                        path: '/vehicle-condition/query',
                                        query: {
                                            orderId: res.data.data.orderId,
                                            orderNo: res.data.data.orderNo,
                                            vin: this.vin.value,
                                            licensePlateColor: this.licensePlateColor.value,
                                            reportType: this.reportType.value,
                                            vinParseId: this.vinParseId.value,
                                            reportId: this.reportId.value
                                        }
                                    })
                                }
                            } else if (res.data.value === 6010) {
                                this.isCreate = false
                                CxlMessage.error({ content: '该车架号报告已存在，请前往【查询记录】查看' })
                            } else {
                                this.isCreate = false
                                CxlMessage.error(res.data.desc)
                            }
                        })
                    }
                })
            }
        })
    }

    /**
     * 上传行驶证
     */
    uploadFile = () => {
        console.log('this.uStore.loginStatus', this.uStore.loginStatus)
        if (!this.uStore.loginStatus) {
            return
        }
        this.isSupportQuery.value = true
        this.parseVin()
    }
    //PC端上传图片
    onUploadFileBase64 = (base64: string) => {
        console.log('base64', base64)
        this.parseVin(base64)
    }

    parseVin = (base64 = '') => {
        useJudgeLogin.init(() => {
            uploadImage({
                start: () => {
                    this.isStartUpload.value = true
                    this.loadingVisible.value = true
                    console.log('start', this.loadingVisible.value)
                },
                succeed: (localData, result) => {
                    console.log('url', result)
                    this.isStartUpload.value = false
                    this.loadingVisible.value = false
                    this.selectCarTypeIndex.value = -1
                    if (result.data.data.vin === '' || result.data.data.driveLicenseKey === '') {
                        CxlMessage.error('请上传清晰无遮挡的行驶证！')
                    } else {
                        this.detectionFinish.value = false
                        this.vin.value = result.data.data.vin
                        this.resultVin.value = result.data.data.vin
                        this.plateNo.value = result.data.data.plateNo
                        this.driveLicense.value = result.data.data.driveLicenseKey
                        console.log('upload file')

                        //维保车况只支持上海牌查询（沪）
                        console.log(result.data.data.plateNo, result.data.data.plateNo.slice(0, 1))
                        if (this.reportType.value === 2) {
                            /**
                             * 维保报告 ocr 识别后
                             * 检查车牌号的值 是否 有遮挡 （数据为空，或数据不满足车牌号数量）
                             * 出险车况 和 新能源车况电池 不检查
                             */
                            if (result.data.data.plateNo === '') {
                                this.uploadCompleteVisible.value = false
                                this.supperQuery.value = false
                                this.uploadImageUrl.value = ''
                                this.comfirmUploadImageUrl.value = ''
                                this.vin.value = ''
                                this.resultVin.value = ''
                                this.plateNo.value = ''
                                this.driveLicense.value = ''
                                CxlMessage.error('请检查车牌号是否有遮挡！')
                            } else if (result.data.data.plateNo.slice(0, 1) === '沪') {
                                console.log('支持')
                                this.supperQuery.value = true
                                this.uploadCompleteVisible.value = true
                                new ImageDirection().init(
                                    base64 === '' ? localData : base64,
                                    result.data.data.direction,
                                    (url: string) => {
                                        this.comfirmUploadImageUrl.value = url
                                    }
                                )
                                this.queryCarTypeList(result.data.data.vin, result.data.data.plateNo)
                            } else {
                                console.log('不支持')
                                this.uploadCompleteVisible.value = false
                                this.supperQuery.value = false
                                this.uploadImageUrl.value = ''
                                this.comfirmUploadImageUrl.value = ''
                                this.vin.value = ''
                                this.resultVin.value = ''
                                this.plateNo.value = ''
                                this.driveLicense.value = ''
                                CxlMessage.error('非上海车牌不支持查询！')
                            }
                        } else {
                            new ImageDirection().init(
                                base64 === '' ? localData : base64,
                                result.data.data.direction,
                                (url: string) => {
                                    this.comfirmUploadImageUrl.value = url
                                }
                            )
                            this.uploadCompleteVisible.value = true
                            this.queryCarTypeList(result.data.data.vin, result.data.data.plateNo)
                        }
                    }
                },
                failed: () => {
                    this.isStartUpload.value = false
                    this.loadingVisible.value = false
                    this.supperQuery.value = false
                    this.uploadImageUrl.value = ''
                    this.comfirmUploadImageUrl.value = ''
                    this.vin.value = ''
                    this.resultVin.value = ''
                    this.plateNo.value = ''
                    this.driveLicense.value = ''
                },
                vehicleLicense: true,
                base64
            })
        })
    }

    //根据vin+车牌号 查询车辆型号列表
    queryCarTypeList = (vin: string, plateNo: string, callback = () => {}) => {
        getCarTypeList(vin, plateNo).then((res: any) => {
            this.carTypeList.length = 0
            this.carModelDetailed.value = ''
            this.carBrand.value = ''
            this.carModel.value = ''
            this.vinParseId.value = ''
            this.licensePlateColor.value = ''
            console.log('carTypeList', this.carTypeList)
            if (res.data.value === 200) {
                this.selectCarTypeIndex.value = -1
                if (res.data.data.length) {
                    res.data.data.forEach((item: any) => {
                        this.carTypeList.push({
                            modelDetail: item.modelDetail,
                            vinParseId: item.vinParseId,
                            licensePlateColor: item.licensePlateColor
                        })
                    })
                    this.carBrand.value = res.data.data[0].brand
                    this.carModel.value = res.data.data[0].model
                    this.vinParseId.value = res.data.data[0].vinParseId
                    this.licensePlateColor.value = res.data.data[0].licensePlateColor

                    if (res.data.data.length === 1) {
                        //车辆类型只有一个的时候，默认选择
                        this.onSelectCarType(0)
                    }
                }

                callback()
            } else {
                // 获取车辆类型列表失败 重置数据
                this.selectCarTypeIndex.value = -1
                CxlMessage.error('系统异常，请联系客服！')
            }
        })
    }
    //检查是否支持查询
    supportQuery = ({ failed = () => {}, succeed = () => {} }) => {
        checkQuery(this.plateNo.value, this.vin.value, this.vinParseId.value).then((res: any) => {
            if (res.data.value === 200) {
                this.reportId.value = res.data.data
                succeed()
            } else {
                failed()
                CxlMessage.error(res.data.desc)
            }
        })
    }
    //点击加载loading 隐藏loading
    loadingHide = () => {
        if (!this.isStartUpload.value) {
            this.loadingVisible.value = false
        }
    }
    //点击图片进行预览
    onPreview = () => {
        useWeixinSdk.previewImage()
    }
    //设置vin可编辑
    onEditVin = () => {
        this.vinDisabled.value = false
    }
    /**
     * 打开协议
     */
    onOpenProtocol = (type: string) => {
        this.router.push({ name: 'protocol', params: { type } })
    }
    //打开案例页面
    openCasePage = () => {
        // this.router.push({ path: '/vehicle-condition/case', query: { type: this.reportType.value } })
        if (this.reportType.value === 1) {
            //出险
            this.router.push({
                path: '/collision',
                query: {
                    reportId: 'systemreporttemplate',
                    type: 'case',
                    vinParseId: 'systemreporttemplate',
                    productType: '1'
                }
            })
        } else if (this.reportType.value === 2) {
            //维保车况
            this.router.push({
                path: '/webview',
                query: {
                    url: '',
                    reportId: '',
                    type: 'case'
                }
            })
        } else if (this.reportType.value === 3) {
            //新能源车况
            this.router.push({
                path: '/new-energy',
                query: {
                    reportId: 'systemreporttemplate',
                    vinParseId: 'systemreporttemplate',
                    productType: '3',
                    type: 'case'
                }
            })
        }
    }
    //监听选择支付方式
    onSelectPay = (index: number) => {
        if (index === 0) {
            if (this.reportType.value === 1) {
                //选择余额时进行判断 余额 > 产品价格 || 免费次数 > 0 || 系统赠送次数 >0
                if (
                    Number(this.walletInfo.remainAmount) < Number(this.price.value) &&
                    Number(this.walletInfo.total) === 0
                ) {
                    return false
                }
            } else {
                //选择余额时进行判断 免费次数 > 0 || 系统赠送次数 >0
                if (Number(this.walletInfo.total) === 0) {
                    return false
                }
            }

            if (this.walletInfo.status === 2) {
                CxlMessage.error('退款申请正在审批中，请使用微信支付！')
                return false
            }
        }
        this.selectPayIndex.value = index
        console.log(index)
        this.payList.forEach((item: any, i: number) => {
            if (index === i) {
                this.payList[i].checked = true
            } else {
                this.payList[i].checked = false
            }
        })
    }
    //监听vin 码的修改
    onChangeVin = (val: any) => {
        console.log('onChangeVin', val.target.value, this.vin.value, this.resultVin.value)
        this.resultVin.value = val.target.value
        //本次修改的内容和上次的内容进行比较，且vin码长度为17
        if (val.target.value !== this.vin.value && val.target.value.length === 17) {
            this.vin.value = this.resultVin.value
            this.queryCarTypeList(val.target.value, this.plateNo.value, () => {
                updateVin(this.driveLicense.value, val.target.value)
            })
        }
    }
    //监听Vin输入框失去焦点
    onVinBlur = (res: any) => {
        console.log('失去焦点', res.target.value, this.vin.value, this.resultVin.value)
        if (res.target.value.length !== 17) {
            CxlMessage.error('请正确输入Vin码！')
        }
    }

    //监听选择那种车型
    onSelectCarType = (index: number) => {
        console.log('监听选择那种车型', this.carTypeList[index])
        this.selectCarTypeIndex.value = index
        this.vinParseId.value = this.carTypeList[index].vinParseId
        this.licensePlateColor.value = this.carTypeList[index].licensePlateColor
        this.carModelDetailed.value = this.carTypeList[index].modelDetail
    }
    //确定选定车型号
    onConfirmVin = () => {
        console.log(this.vin.value)

        //查询不到也让用户进行下一步
        if (this.selectCarTypeIndex.value < 0 && this.carTypeList.length) {
            CxlMessage.error('请选择车型！')
            return
        }
        if (this.reportType.value === 2) {
            //只有维保车况需要检测是否支持查询
            this.supportQuery({
                failed: () => {
                    this.isSupportQuery.value = false
                },
                succeed: () => {
                    this.uploadCompleteVisible.value = false
                    this.isSupportQuery.value = true
                    this.detectionFinish.value = true
                    this.uploadImageUrl.value = this.comfirmUploadImageUrl.value
                }
            })
        } else {
            //出险+新能源
            this.uploadCompleteVisible.value = false
            this.isSupportQuery.value = true
            this.detectionFinish.value = true
            this.uploadImageUrl.value = this.comfirmUploadImageUrl.value
        }
    }
    //监听勾选协议
    checkboxChange = (res: boolean) => {
        if (res) {
            if (!this.checked.value) {
                this.checked.value = true
            }
            if (!this.auth.value) {
                this.auth.value = true
            }
        }
    }
}
